<template>
    <div class="Box">
        <div class="left">
            <p><slot name="title"></slot></p>
            <p v-show="!props.isHiddenTag">
                <span   v-for="(item,index) in props.tagArr" 
                        :key="item.title" 
                        @click="getTypeData(item.label)"
                        :style="selIndex === index?'color:#00a1d6':''"
                        >{{ item.title }}</span>
                <span class="selLog" :style="'left:' + selIndex * 70 + 'px'"></span>
            </p>
        </div>
        <div v-if="!props.isHiddenBtn">
            <el-button><el-icon><VideoPlay /></el-icon>播放全部</el-button>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

interface Props{
    tagArr?:Array<{
        title:string
        label:string
    }>
    isHiddenBtn?:boolean
    isHiddenTag?:boolean
}
const props = defineProps<Props>()
let selIndex = ref<number>(0)
const router = useRouter()
const emit = defineEmits<{
    (e:'changeData',order: string): void
}>()
onBeforeMount(() => {
    if (router.currentRoute.value.query.order && props.tagArr) {
        selIndex.value = props.tagArr.findIndex(el => el.label === router.currentRoute.value.query.order )
    } else {
        selIndex.value = 0
    }
})
function getTypeData(type:string){
    selIndex.value = props.tagArr?.findIndex(el => el.label === type )
    emit('changeData',type)
}
watch(() => props.tagArr,() => {
    selIndex.value = 0
})
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Box{
    width: 100%;
    height: 30px;
    display: flex;
    padding: 10px 20px 30px 0;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center
}
.left{
    @include flexRowCenter;
    color: #222222;
    gap: 0 20px;
    & p:nth-child(1){
        line-height: 30px;
        font-size: 21px;
        @include flexRowCenter;
        gap: 10px;
    }
    & p:nth-child(2){
        @include flexRowCenter;
        gap: 20px;
        font-size: 12px;
        position: relative;
    }
    & p:nth-child(2) span{
        width: 50px;
        cursor: pointer;
    }
}
.selLog{
    position: absolute;
    bottom: -4px;
    left: 0;
    height: 1.5px;
    background: #00A1D6;
    @include flexRowCenter;
    transition: left 0.5s;
    &::after{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: -6px;
        border-bottom: 3px solid #00a1d6;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid transparent;
    }
}
</style>